<template>
  <el-dialog
    title="添加系统参数"
    width="30%"
    :append-to-body="true"
    :visible.sync="showTag"
  >
    <el-form size="mini" :model="form" label-width="40px">
      <el-form-item label="名称">
        <el-input v-model="form.name" placeholder="系统参数名称"></el-input>
      </el-form-item>
      <el-form-item label="键">
        <el-input v-model="form.key"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="form.type">
          <el-option
            v-for="(value, key) in types"
            :key="key"
            :value="key"
            :label="value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type === 'BOOLEAN'" label="值">
        <el-switch
          v-model="form.value"
          active-value="on"
          inactive-value="off"
        ></el-switch>
      </el-form-item>
      <el-form-item v-if="form.type === 'STRING'" label="值">
        <el-input v-model="form.value"></el-input>
      </el-form-item>
      <el-form-item v-if="form.type === 'JSON'" label="值">
        <el-input v-model="form.value" type="textarea"></el-input>
      </el-form-item>
      <el-form-item v-if="form.type === 'IMAGE'" label="图片">
        <el-upload
          :file-list="fileList"
          :action="uploadUrl"
          list-type="picture"
          :on-success="onSuccess"
          :limit="1"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="hide">
        取消
      </el-button>
      <el-button type="primary" :loading="appLoading" size="mini" @click="sub">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { CONFIG_TYPE } from "../../lib/config";
import { AppLoadingMixin } from "../../lib/mixins/app-loading";
import { FIELDS } from "../../lib/tables/config";
import { UploadMixin } from "../../lib/mixins/upload";
import { getFileObjectByUrl } from "../../lib/utils";

export default {
  name: "ConfigAddDialog",
  mixins: [AppLoadingMixin, UploadMixin],
  data() {
    return {
      form: {
        type: "STRING"
      },
      fileList: [],
      info: {},
      types: CONFIG_TYPE,
      showTag: false
    };
  },
  methods: {
    show(data) {
      this.info = data;
      this.setForm();
      this.showTag = true;
    },
    hide() {
      this.resetForm();
      this.showTag = false;
    },
    setForm() {
      const { info = {} } = this;
      FIELDS.forEach(r => {
        info && info[r] && this.$set(this.form, r, info[r]);
      });
      if (info.type === "IMAGE") {
        if (info.value) this.fileList = [getFileObjectByUrl(info.value)];
      }
    },
    resetForm() {
      FIELDS.forEach(r => {
        this.$set(this.form, r, null);
      });
    },
    onSuccess({ errno, data }) {
      if (errno === 0) this.$set(this.form, "value", data.url);
    },
    async sub() {
      const form = { ...this.form };
      if (form.key) form.key = form.key.toUpperCase();

      if (form.id) {
        if (await this.$configService.update(form)) {
          this.hide();
          this.$message.success("修改成功");
          this.$emit("ok");
        }
        return;
      }

      if (await this.$configService.add(form)) {
        this.hide();
        this.$message.success("添加成功");
        this.$emit("ok");
      }
    }
  }
};
</script>

<style scoped></style>
